<!DOCTYPE html>
<html>
<head>
    <title>虚拟机状态监控</title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
    <link rel='stylesheet' href='/stylesheets/chartCard.css'/>
    <link rel='stylesheet' href='/stylesheets/dragchartcomp.css'/>
    <link rel='stylesheet' href='/stylesheets/table.css'/>
    <script type="text/javascript" src="/javascripts/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="/javascripts/drag.js"></script>
    <script>
    function handleDragEnd(data) {
        if (data.id === 'module1') {
            $('.chart_box').eq(0).hide()
        }
        if (data.id === 'module2') {
            $('.chart_box').eq(1).hide()
        }
    }

    $(function () {
        drag.init('drag_chart_comp',
            [
                {
                    id: 'module1',
                    appName: '应用1',
                    moduleName: '模块1',
                    appPath: 'http://localhost:3000',
                    modulePath: 'http://localhost:3000/module1'
                },
                {
                    id: 'module2',
                    appName: '应用1',
                    moduleName: '模块2',
                    appPath: 'http://localhost:3000',
                    modulePath: 'http://localhost:3000/module2'
                }
            ],
            handleDragEnd
        );

        $('.time_ctrl').click(function () {
            let index = $('.time_ctrl').index($(this))
            bc.postMessage(index)
            clearInterval(intervalA)
            clearInterval(intervalB)
            console.log(index);
            if (index === 0) {
                loadChartA(1000)
                loadChartB(1000)
            } else if (index === 1) {
                loadChartA(2000)
                loadChartB(2000)
            }
        })
    })
    </script>
</head>
<body>
<% include common/header.ejs %>
<div class="main">
    <% include common/menu.ejs %>
    <div class="main-content">
        <div class="wrapper virtualmachine">
            <!--报表区域: 虚拟机综合状态-->
            <div class="chart_card">
                <div class="chart_card_title">
                    虚拟机综合状态
                    <div class="time_ctrl">1S刷新</div>
                    <div class="time_ctrl">2S刷新</div>
                </div>
                <div class="chart_card_content">
                    <div class="chart_box">
                        <% include chart1.ejs %>
                    </div>
                    <div class="chart_box">
                        <% include chart2.ejs %>
                    </div>
                    <div class="chart_box">
                        <% include chart3.ejs %>
                    </div>
                    <div class="chart_box">
                        <% include chart4.ejs %>
                    </div>
                </div>
            </div>
            <!--表格区域-->
            <div class="table_area">
                <div class="table_card">
                    <div class="table_card_title">
                        实时日志信息
                    </div>
                    <table class="table_black">
                        <thead class="table_head">
                        <tr>
                            <td class="table_title">级别</td>
                            <td class="table_title">日期和时间</td>
                            <td class="table_title">来源</td>
                            <td class="table_title">事件ID</td>
                            <td class="table_title">任务类别</td>
                        </tr>
                        </thead>
                        <tbody class="table_body">
                        <% for(var i = 0; i < 10; i++) { %>
                        <tr>
                            <td class="table_text td_level">信息</td>
                            <td class="table_text">2019/04/17 12:01:11</td>
                            <td class="table_text">User Profill...</td>
                            <td class="table_text">1532</td>
                            <td class="table_text">无</td>
                        </tr>
                        <% } %>
                        </tbody>
                    </table>
                </div>
                <div class="table_card">
                    <div class="table_card_title">
                        告警信息
                    </div>
                    <table class="table_black">
                        <thead class="table_head">
                        <tr>
                            <td class="table_title">日期和时间</td>
                            <td class="table_title">来源</td>
                            <td class="table_title">级别</td>
                            <td class="table_title">信息</td>
                            <td class="table_title">操作</td>
                        </tr>
                        </thead>
                        <tbody class="table_body">
                        <% for(var i = 0; i < 10; i++) { %>
                            <tr>
                                <td class="table_text td_level">2019/01/11 12:00:01</td>
                                <td class="table_text">任务一</td>
                                <td class="table_text">信息</td>
                                <td class="table_text">检测...</td>
                                <td class="table_text">
                                    <div class="table_operate">查看详情</div>
                                </td>
                            </tr>
                        <% } %>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
